<template>
  <div class="forum">
    <headers></headers>
    <div class="forum-container">
      <!-- 页面标题 -->
      <div class="forum-header">
        <h2 class="page-title">资讯论坛</h2>
        <p class="page-subtitle">探索最新旅游资讯和游客分享</p>
      </div>
      
      <!-- 搜索和过滤区域 -->
      <el-card class="search-card" shadow="hover">
        <div class="search-area">
          <div class="search-input-container">
            <el-input 
              v-model="search.title" 
              placeholder="搜索资讯标题关键词" 
              size="small"
              prefix-icon="el-icon-search"
              clearable
            ></el-input>
          </div>
          
          <div class="filter-options">
            <!-- 分类筛选 -->
            <el-select 
              v-model="categoryFilter" 
              placeholder="全部分类" 
              size="small"
              clearable
              @change="handleCategoryChange"
            >
              <el-option label="全部分类" value=""></el-option>
              <el-option label="旅游攻略" value="1"></el-option>
              <el-option label="景点介绍" value="2"></el-option>
              <el-option label="游客体验" value="3"></el-option>
              <el-option label="美食推荐" value="4"></el-option>
              <el-option label="活动公告" value="5"></el-option>
            </el-select>
            
            <!-- 排序选项 -->
            <el-select 
              v-model="sortOption" 
              placeholder="默认排序" 
              size="small"
              @change="handleSortChange"
            >
              <el-option label="最新发布" value="newest"></el-option>
              <el-option label="最多浏览" value="most_viewed"></el-option>
              <el-option label="最多评论" value="most_commented"></el-option>
            </el-select>
          </div>
          
          <el-button 
            type="primary" 
            size="small" 
            icon="el-icon-search"
            @click="searchPage"
            class="search-button"
          >搜索</el-button>
        </div>
      </el-card>
      
      <!-- 内容列表区域 -->
      <div class="forum-content" v-loading="loading">
        <transition-group name="forum-list" tag="div">
          <!-- 资讯卡片列表 - 修复点击问题 -->
          <div 
            v-for="(item, index) in tableData" 
            :key="item.id"
            class="forum-item-wrapper"
          >
            <el-card 
              class="forum-item"
              shadow="hover"
            >
              <!-- 使用额外的可点击区域包装整个卡片内容 -->
              <div class="clickable-area" @click="toInfo(item.id)">
                <!-- 资讯序号和标签 -->
                <div class="forum-item-header">
                  <div class="forum-item-index">{{ (search.pageNumber - 1) * search.pageSize + index + 1 }}</div>
                  <div class="forum-item-tags">
                    <el-tag 
                      size="mini" 
                      :type="getRandomTagType(index)"
                      effect="plain"
                    >{{ getRandomCategory(index) }}</el-tag>
                    
                    <el-tag 
                      size="mini" 
                      type="danger" 
                      v-if="index < 3"
                      effect="dark"
                    >热门</el-tag>
                  </div>
                </div>
                
                <!-- 标题区域 -->
                <div class="forum-item-title">
                  <h3>{{ item.title }}</h3>
                </div>
                
                <!-- 资讯摘要和元数据 -->
                <div class="forum-item-content">
                  <p class="forum-item-summary">{{ generateSummary(item.title) }}</p>
                  <div class="forum-item-meta">
                    <span class="meta-item">
                      <i class="el-icon-user"></i>
                      {{ getRandomAuthor(index) }}
                    </span>
                    <span class="meta-item">
                      <i class="el-icon-view"></i>
                      {{ Math.floor(Math.random() * 1000) + 100 }}
                    </span>
                    <span class="meta-item">
                      <i class="el-icon-chat-dot-round"></i>
                      {{ Math.floor(Math.random() * 50) }}
                    </span>
                    <span class="meta-item">
                      <i class="el-icon-date"></i>
                      {{ generateRandomDate() }}
                    </span>
                  </div>
                </div>
              </div>
              
              <!-- 添加明确的详情按钮 -->
              <div class="forum-item-actions">
                <el-button 
                  type="primary" 
                  size="mini" 
                  plain
                  @click.stop="toInfo(item.id)"
                >查看详情</el-button>
              </div>
            </el-card>
          </div>
        </transition-group>
        
        <!-- 空状态显示 -->
        <el-empty 
          v-if="tableData.length === 0 && !loading"
          description="暂无相关资讯"
        ></el-empty>
      </div>
      
      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination
          background
          :current-page.sync="search.pageNumber"
          :page-size="search.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
        ></el-pagination>
      </div>
    </div>
    <bottoms></bottoms>
  </div>
</template>

<script>
import { getSysForumPage } from '../../api/api'
import headers from '@/components/header'
import bottoms from '@/components/bottom'

export default {
  data() {
    return {
      search: {
        title: "",
        pageSize: 12,
        pageNumber: 1,
      },
      total: 100,
      tableData: [],
      loading: false,
      categoryFilter: '',
      sortOption: 'newest',
      authors: ['张旅行家', '李探险者', '王美食家', '刘攻略师', '陈摄影师'],
      categories: ['旅游攻略', '景点介绍', '游客体验', '美食推荐', '活动公告']
    }
  },
  components: {
    headers,
    bottoms
  },
  methods: {
    searchPage() {
      this.search.pageNumber = 1;
      this.getSysForumPage();
    },
    
    getSysForumPage() {
      this.loading = true;
      getSysForumPage(this.search).then(res => {
        if (res.code == 1000) {
          this.tableData = res.data.records;
          this.total = res.data.total;
        }
      }).finally(() => {
        this.loading = false;
      });
    },
    
    // 明确修复路由跳转方法
    toInfo(id) {
      console.log("跳转到详情页，ID:", id);
      this.$router.push({
        path: "/forumInfo",
        query: { id: id }
      });
    },
    
    handleCurrentChange(val) {
      this.search.pageNumber = val;
      window.scrollTo({ top: 0, behavior: 'smooth' });
      this.getSysForumPage();
    },
    
    handleCategoryChange() {
      this.searchPage();
    },
    
    handleSortChange() {
      this.searchPage();
    },
    
    // 辅助方法 - 生成随机摘要
    generateSummary(title) {
      const summaries = [
        '这篇资讯详细介绍了景点的特色和游玩路线，为您的旅行提供参考。',
        '作者分享了自己的亲身体验和独特见解，推荐给所有计划前往的游客。',
        '内容涵盖交通、住宿、美食等全方位信息，是一篇不可多得的实用攻略。',
        '这是一篇图文并茂的游记，记录了作者的精彩旅行瞬间和感受。',
        '文章汇总了当地最值得品尝的美食和推荐餐厅，美食爱好者不容错过。'
      ];
      
      return summaries[Math.floor(Math.random() * summaries.length)];
    },
    
    generateRandomDate() {
      const now = new Date();
      const randomDays = Math.floor(Math.random() * 30);
      const date = new Date(now.getTime() - randomDays * 24 * 60 * 60 * 1000);
      
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
    },
    
    getRandomTagType(index) {
      const types = ['', 'success', 'info', 'warning', 'danger'];
      return types[index % types.length];
    },
    
    getRandomCategory(index) {
      return this.categories[index % this.categories.length];
    },
    
    getRandomAuthor(index) {
      return this.authors[index % this.authors.length];
    }
  },
  mounted() {
    // 确保在组件挂载时加载数据
    this.getSysForumPage();
  }
}
</script>

<style scoped>
/* 主容器样式 */
.forum {
  background-color: #f5f7fa;
  min-height: 100vh;
}

.forum-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
}

/* 页面标题区域 */
.forum-header {
  text-align: center;
  margin-bottom: 30px;
}

.page-title {
  font-size: 28px;
  color: #303133;
  margin-bottom: 8px;
}

.page-subtitle {
  font-size: 16px;
  color: #909399;
  margin: 0;
}

/* 搜索卡片样式 */
.search-card {
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.search-area {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.search-input-container {
  flex: 1;
  min-width: 200px;
}

.filter-options {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.search-button {
  transition: all 0.3s;
}

.search-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 内容列表样式 */
.forum-content {
  min-height: 400px;
}

.forum-item-wrapper {
  margin-bottom: 15px;
}

.forum-item {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.forum-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

/* 添加可点击区域样式 */
.clickable-area {
  cursor: pointer;
}

.forum-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.forum-item-index {
  background-color: #409EFF;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
}

.forum-item-tags {
  display: flex;
  gap: 8px;
}

.forum-item-title h3 {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  line-height: 1.4;
}

.forum-item-summary {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #606266;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.6;
}

.forum-item-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  color: #909399;
  font-size: 13px;
}

.meta-item {
  display: flex;
  align-items: center;
}

.meta-item i {
  margin-right: 5px;
}

/* 添加卡片底部操作区域 */
.forum-item-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #EBEEF5;
}

/* 分页容器 */
.pagination-container {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* 动画效果 */
.forum-list-enter-active, .forum-list-leave-active {
  transition: all 0.5s;
}

.forum-list-enter, .forum-list-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

/* 响应式适配 */
@media (max-width: 768px) {
  .search-area {
    flex-direction: column;
    align-items: stretch;
  }
  
  .filter-options {
    width: 100%;
  }
  
  .forum-item-meta {
    flex-wrap: wrap;
    gap: 10px;
  }
}
</style>